<script>
  import sheep from '@/sheep';

  export default {
    name: 'pcChineseSurname',
    data() {
      return {
        // 姓氏搜索
        familyName: '',
        // 姓氏列表
        familyNameList: [],
        // 当前选中的姓氏详情
        surnameDetail: {},
        // 当前选中国的姓氏下标
        familyNameCurrent: 0,
      };
    },
    computed: {
      sq_image_path() {
        return sheep.$store('AI').sq_image_path;
      },
    },
    created() {
      this.getAllSurname();
    },
    methods: {
      // 获取中华姓氏
      async getAllSurname() {
        const { data } = await sheep.$api.surname.getAllSurname({
          cid: 4,
          code: this.familyName,
        });
        this.familyNameList = data.list;
        await this.getSurnameDetail(this.familyNameList[0].id);
      },
      // 获取选中的姓氏详情
      async getSurnameDetail(id) {
        const { data } = await sheep.$api.surname.getSurnameDetail({
          id: id,
        });
        this.surnameDetail = data;
      },
      // 选中姓氏下标
      selectIndex(index) {
        this.familyNameCurrent = index;
        this.getSurnameDetail(this.familyNameList[index].id);
      },
      surnameDetails() {

      },
      ancestorLikes() {

      },
      goXINHUA() {

      },
      // 去献花
      goToPresentFlowers(){

      },
      // 查看姓氏树
      viewDetails(){

      }
    },
  };
</script>

<template>
  <view class="flex" style="font-family: Source Han Sans CN, Source Han Sans CN;height: 100%;">
    <view class="flex flex-column flex-sub bg_FFFFFF" style="border-radius: 16rpx;overflow: hidden">
      <view style="width: 100%;padding: 20rpx 0;border-bottom: 2rpx solid #E8E8E8"
            class="flex align-center justify-between">
        <view class="flex align-end" style="margin-left: 40rpx;">
          <view class="flex align-center">
            <view style="width: 8rpx;height: 36rpx;border-radius: 14rpx;background: #FF440A"></view>
            <view style="font-size: 56rpx;color: #363636;margin-left: 10rpx;white-space: nowrap" class="fw_500">
              中华姓氏
            </view>
          </view>
          <view style="font-size: 40rpx;color: #363636;margin-left: 20rpx;white-space: nowrap" class="fw_500">百家姓
          </view>
        </view>
        <view
          style="width: 20%;height: 60rpx;border-radius: 30rpx;overflow: hidden;border: 2rpx solid #BCBCBC;margin-right: 40rpx;"
          class="flex align-center"
        >
          <input type="text" v-model="familyName" placeholder="搜索" style="margin-left: 20rpx;">
          <text class="iconfont icon-ic_search" style="margin-right: 30rpx;cursor:pointer;"></text>
        </view>
      </view>
      <view class="flex-sub" style="width: 100%;position: relative">
        <scroll-view scroll-y class="surnameList">
          <view style="width: 100%;" class="flex flex-column align-center mt_20 mb_20">
            <view style="flex-wrap: wrap;" class="flex align-center ml_20 mr_20">
              <view v-for="(item,index) in familyNameList"
                    :key="index"
                    :class="familyNameCurrent == index ? 'active' : 'no_active'"
                    style="width: 120rpx;height: 120rpx;margin-right: 20rpx;margin-bottom: 20rpx;cursor:pointer;"
                    class="flex align-center justify-center"
                    @click.stop="selectIndex(index)"
              >
                <view style="font-weight: 500;line-height: 50rpx"
                      class="flex align-center justify-center"
                      :style="{
                        fontSize:item.surname.length < 2 ? '84rpx' :  '52rpx'
                      }"
                >
                  <view :style="{
                          width: item.surname.length < 2 ? '84rpx' : '104rpx',
                        }"
                  >
                    {{ item.surname }}
                  </view>
                </view>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="ml_20 flex flex-column align-center"
          style="width: 686rpx;position: relative">
      <scroll-view scroll-y="true" class="surnameList">
        <view style="width: 100%;border-radius: 16rpx" class="flex flex-column align-center bg_FFFFFF">
          <view style="width: 100%;padding: 20rpx 0;border-bottom: 2rpx solid #E8E8E8"
                class="flex align-center justify-between"
          >
            <view class="flex align-end" style="margin-left: 40rpx;">
              <view class="flex align-center">
                <view style="width: 8rpx;height: 36rpx;border-radius: 14rpx;background: #FF440A"></view>
                <view style="font-size: 56rpx;color: #363636;margin-left: 10rpx;white-space: nowrap" class="fw_500">
                  {{ surnameDetail.surname }}姓始祖
                </view>
              </view>
            </view>
          </view>
          <view style="margin-top: 50rpx;width: 80%" @click.stop="surnameDetails">
            <image :src="surnameDetail.image_input" style="width: 100%;" mode="widthFix"></image>
          </view>
          <view style="font-size: 48rpx;margin-top: 40rpx;" class="fw_500 color_292929">
            {{ surnameDetail.ancestors }}
          </view>
          <view style="font-size: 34rpx;margin-top: 44rpx;" class="color_4B4B4B fw_500">
            百家姓 第{{ surnameDetail.ranking }}名 总人口{{ surnameDetail.population }}
          </view>
          <view class="flex align-center justify-around"
                style="margin-top: 74rpx;width: 90%;">
            <view class="mrZhongWu_founder_right_operation_list flex flex-column align-center"
                  style="position: relative" @click.stop="ancestorLikes">
              <image class="mrZhongWu_founder_right_operation_list_image"
                     :src="surnameDetail.is_like == 1 ? `${sq_image_path}/chineseSurname/sq_thumbsUp_select.png`:`${sq_image_path}/chineseSurname/sq_thumbsUp.png`"
              ></image>
              <text class="mrZhongWu_founder_right_operation_list_text" style="margin-top: 8rpx;">
                点赞{{ surnameDetail.likes || 0 }}
              </text>
              <!--                        <image :src="`${IMG_URL}dianzan_gif.gif`" v-if="showGif" class="gif"></image>-->
            </view>
            <view class="mrZhongWu_founder_right_operation_list flex flex-column align-center"
                  @click="goXINHUA(surnameDetail.id)">
              <image class="mrZhongWu_founder_right_operation_list_image"
                     :src="`${sq_image_path}/chineseSurname/sq_comments.png`"></image>
              <text class="mrZhongWu_founder_right_operation_list_text" style="margin-top: 8rpx;">
                评论{{ surnameDetail.comment || 0 }}
              </text>
            </view>
          </view>
          <view class="flex align-center justify-center bg_FF4206 fw_500 color_FFFFFF"
                style="width: 80%;height: 86rpx;border-radius: 100rpx;font-size: 40rpx;margin-top: 94rpx;margin-bottom: 62rpx;cursor:pointer;"
                @click.stop="goToPresentFlowers"
          >
            去献花
          </view>
        </view>
        <view style="width: 100%;border-radius: 8px;margin-top: 16px;"
              class="flex flex-column align-center bg_FFFFFF">
          <view style="width: 100%;padding: 10px 0;border-bottom: 1px solid #E8E8E8"
                class="flex align-center justify-between">
            <view class="flex align-end" style="margin-left: 20px;">
              <view class="flex align-center">
                <view style="width: 4px;height: 18px;border-radius: 7px;background: #FF440A"></view>
                <view style="font-size: 28px;color: #363636;margin-left: 5px;white-space: nowrap" class="fw_500">
                  姓氏树
                </view>
              </view>
            </view>
          </view>
          <view class="flex flex-column align-center"
                style="width: 90%;border: 1px solid #FAD582;background: #FFF8E8;margin-top: 19px;margin-bottom: 19px;border-radius: 16px"
                @click.stop="viewDetails"
          >
            <image :src="`${sq_image_path}/chineseSurname/surnameTree.png`" mode="widthFix"
                   style="width: 70%;margin-top: 38px;"></image>
            <view class="fw_500" style="color: #5C5C5C;font-size: 19px;margin-top: 15px;">
              姓氏树
            </view>
            <view class="flex align-center justify-center bg_FF4206 fw_500 color_FFFFFF"
                  style="width: 80%;height: 43px;border-radius: 50px;font-size: 20px;margin-top: 47px;margin-bottom: 31px;cursor:pointer;"

            >
              查看详情
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .surnameList {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .active {
    background: url($uni-bg-url-sq + "/index/pc_genealogy_bg_active.png") no-repeat;
    background-size: 100% 100%;
  }

  .no_active {
    background: url($uni-bg-url-sq + "/index/pc_genealogy_bg.png") no-repeat;
    background-size: 100% 100%;
  }

  .mrZhongWu_founder_right_operation_list_image {
    width: 60rpx;
    height: 60rpx;
  }

  .genealogy_bg_icon {
    background: url($uni-bg-url-sq + "/index/pc_genealogy_bg_icon.png") no-repeat;
    background-size: 100% 100%;
  }

  .firstAncestor_bg {
    background: url($uni-bg-url-sq + "/index/pc_firstAncestor_bg.png") no-repeat;
    background-size: 100% 100%;
  }

  .timeListDetail_listLabel_line {
    width: 16rpx;
    height: 44rpx;
    background: #FF4206;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
</style>